import React, { useEffect, useState } from 'react'
import { User } from '../types'
import type { ApiResponse } from '../utils/axios'
import service from '../utils/axios'
import { message, Modal, Form, Input, Select } from 'antd'

interface Obj2 {
  _id: string
  name: string
  password: string
  role_id: {
    _id: string
    name: string
    permissions: Array<string>
    description: string
  }
  lastLogin: string
  status: number
}

const Users: React.FC = () => {
  const [users, setusers] = useState<Obj2[]>([]) // 保存用户列表
  const [key, setkey] = useState('') // 搜索关键词
  const [role, setrole] = useState<any[]>([]) // 保存角色列表
  const [open, setOpen] = useState(false) // 控制 modal 显示
  const [editData, setEditData] = useState<Partial<Obj2>>({}) // 当前编辑项，新增为空
  const [form] = Form.useForm() // 表单实例

  // 获取用户数据
  const getusers = async (): Promise<void> => {
    let params: any = {}
    if (key) {
      params.key = key // 如果有搜索关键词则加入参数
    }
    let res = await service.get('/WYQ/user', { params }) as ApiResponse<Obj2[]>
    setusers(res.data) // 设置用户数据
  }

  // 删除单个用户
  const delone = async (id: string) => {
    let res = await service.delete('/WYQ/del', { params: { _id: id } })
    if (res.code == 200) {
      message.success('删除成功', () => {
        getusers() // 删除后刷新列表
      })
    }
  }

  // 获取角色列表
  const getrole = async () => {
    let res = await service.get('/WYQ/role') as ApiResponse<any[]>
    setrole(res.data) // 保存角色列表
  }

  // 点击“添加用户”
  const handleAdd = () => {
    setEditData({}) // 清空编辑数据表示是新增
    form.resetFields() // 重置表单
    setOpen(true) // 打开弹窗
  }

  // 点击“编辑”用户
  const handleEdit = (record: Obj2) => {
    setEditData(record) // 设置当前编辑项
    form.setFieldsValue({
      name: record.name,
      password: record.password,
      role_id: record.role_id._id,
    }) // 设置表单默认值
    setOpen(true) // 打开弹窗
  }

  // 点击“确认”提交表单
  const handleOk = async () => {
    try {
      const values = await form.validateFields() // 校验字段

      if (editData._id) {
        // 如果存在 _id，说明是更新
        await service.put('/WYQ/upd', {
          ...values,
          _id: editData._id, // 添加 id 字段供后端识别
        })
        message.success('更新成功')
      } else {
        // 否则是新增
        await service.post('/WYQ/add', values)
        message.success('添加成功')
      }

      setOpen(false) // 关闭弹窗
      getusers() // 刷新列表
    } catch (error) {
      console.error(error)
    }
  }

  // 关闭弹窗
  const handleCancel = () => {
    setOpen(false) // 关闭 modal
  }

  // 页面初始化时获取用户与角色列表
  useEffect(() => {
    getusers()
    getrole()
  }, [])

  return (
    <div className="page-container">
      <h1>用户管理</h1>
      <div className="actions-bar">
        <button className="btn btn-primary" onClick={handleAdd}>添加用户</button>
        <div className="search-box">
          <input type="text" placeholder="搜索用户..." value={key} onChange={(e) => { setkey(e.target.value) }} />
          <button onClick={getusers}>搜索</button>
        </div>
      </div>

      <div className="table-container">
        <table className="data-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>角色</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user, index) => (
              <tr key={user._id}>
                <td>{index + 1}</td>
                <td>{user.name}</td>
                <td>{user.role_id.name}</td>
                <td>
                  <span className={`status-badge ${user.status === 1 ? 'active' : 'inactive'}`}>
                    {user.status === 1 ? '活跃' : '禁用'}
                  </span>
                </td>
                <td>
                  <button className="btn btn-edit" onClick={() => handleEdit(user)}>编辑</button>
                  <button className="btn btn-delete" onClick={() => delone(user._id)}>删除</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 添加/编辑用户弹窗 */}
      <Modal
        title={editData._id ? '编辑用户' : '添加用户'} // 根据是否有 id 判断标题
        open={open}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
          <Form.Item
            label="角色"
            name="role_id"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select placeholder="请选择角色">
              {role.map(r => (
                <Select.Option key={r._id} value={r._id}>
                  {r.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default Users
